<template>
  <div class="root">
    <!-- 登录 -->
    <!-- <router-link to="/login"> -->
    <div class="statusLogin" @click="jumpLogin">
      <div class="LoginNo">
        <div class="LoginImg">
          <img src="../../build/perHeaderBla.svg" alt>
        </div>
        <div class="textContent">
          <p>未登录</p>
          <p>登录句读收藏喜欢的句子</p>
        </div>
      </div>

      <!-- 收藏 -->
      <div class="statusLoginData">
        <div class="DataPersonal">
          <p>0</p>
          <p>订阅</p>
        </div>
        <div class="DataPersonal">
          <p>0</p>
          <p>句子</p>
        </div>
        <div class="DataPersonal">
          <p>0</p>
          <p>喜欢</p>
        </div>
      </div>
    </div>
    <!-- </router-link> -->
    

    <div class="setting">
      <p>
        <span class="fa fa-bell"></span>
        <span>我的消息</span>
      </p>
      <p>
        <span class="fa fa-bookmark"></span>
        <span>我的收藏夹</span>
      </p>
      <p>
        <!-- <span> -->
        <img class="setFirImg" src="../../build/messageTwo.svg" alt>
        <!-- </span> -->
        <span>我的评论</span>
      </p>
    </div>
    <!-- 消息+3 -->
    <div class="setting">
      <p>
        <span class="fa fa-map-signs"></span>
        <span>常见问题</span>
      </p>
      <p>
        <span class="fa fa-exclamation-circle"></span>
        <span>我要反馈</span>
      </p>
      <p>
        <span class="fa fa-thumbs-up"></span>
        <span>推荐句读</span>
      </p>
    </div>
    <!-- 消息 -->
    <div class="setting">
      <p>
        <span class="fa fa-cog"></span>
        <span>设置</span>
      </p>
      
    </div>
  </div>
</template>
<script>
import login from './login'
export default{
    data:function(){
        return{

        }
    },
    components:{
        login
    },
    mounted() {
        
    },
    methods: {
        jumpLogin:function(){
            this.$router.push("./login")
        }
    },
}
</script>
<style scoped>
.statusLogin {
  width: 100vw;
  height: 57vw;
  /* border: 1px solid black; */
}
.LoginNo {
  display: flex;
  justify-content: space-between;
}
.LoginImg {
  width: 25vw;
  height: 25vw;
  /* border: 1px solid black; */
  margin: 9vw 5vw;
  border-radius: 50%;
  background-color: rgb(211, 206, 194);
}
.LoginNo img {
  width: 20vw;
  height: 20vw;
  margin: 2vw 2.9vw;
  opacity: 0.3;
}
.textContent {
  width: 60vw;
  height: 20vw;
  /* border: 1px solid black; */
  margin: 11vw 5vw;
  line-height: 10vw;
}
.textContent p:nth-child(1) {
  font-size: 7vw;
  font-weight: bold;
  color: rgb(129, 122, 122);
}
.textContent p:nth-child(2) {
  font-size: 4vw;
  color: rgb(197, 185, 185);
}
.statusLoginData {
  width: 100vw;
  height: 12vw;
  /* border: 1px solid black; */
  display: flex;
  /* justify-content: space-around; */
}
.DataPersonal {
  width: 34vw;
  border-left: 1px solid rgb(243, 240, 240);
  text-align: center;
  margin-bottom: 4vw;
}
.DataPersonal > p:nth-child(2) {
  font-size: 3vw;
  color: rgb(185, 172, 172);
}
.setting {
  width: 100vw;
  height: 30vw;
  border-top: 3vw solid rgb(236, 229, 229);
  padding-bottom: 7vw;
  /* line-height: 10vw; */
}
.setting p {
  line-height: 12vw;
  padding: 0 2vw;
  /* margin: 2vw; */
  border-bottom: 1px solid rgb(245, 239, 239);
}
.setFirImg {
  width: 5vw;
  height: 5vw;
}
.setting p:nth-child(3){
    border-bottom: none;
}
</style>